<template>
  <div></div>
</template>
<script setup>
import { Leafer, Rect, Text, Box } from 'leafer-ui';
import '@leafer-in/state' // 导入交互状态插件 
import '@leafer-in/animate' // 导入动画插件
import '@leafer-in/export' // 引入导出元素插件 //
const leafer = new Leafer({
  view: window
})
const rect = new Rect({
  width: 120,
  height: 100,
  stroke: '#333',
  cornerRadius: 10,
  dashPattern: [6, 6] // 绘制虚线
})
//两个按钮
const box1 = new Box({
  x: 0,
  y: 110,
  width: 100,
  height: 100,
  children: [
    new Text({
      text: '设置',
      fill: '#333',
      padding: [2, 15],
      fontSize: 12,
      boxStyle: {
        fill: '#63cdda',
        cornerRadius: 20,
      },
      hoverStyle: {
        fill: 'white',
        boxStyle: {
          fill: '#f78fb3',
          cornerRadius: 20
        }
      },
      event: {
        tap: function () {
          rect.set({
            stroke: 'blue',
            strokeWidth: 4,
          })
        }
      }
    }),
    new Text({
      x: 60,
      text: '重置',
      fill: '#333',
      padding: [2, 15],
      fontSize: 12,
      boxStyle: {
        fill: '#c8d6e5',
        cornerRadius: 20,
      },
      hoverStyle: {
        fill: 'white',
        boxStyle: {
          fill: '#ff6b6b',
          cornerRadius: 20
        }
      },
      event: {
        tap: function () {
          rect.set({
            stroke: '#333',
            strokeWidth: 1,
            dashPattern: [6, 6] // 绘制虚线
          })
        }
      }
    }),
    new Text({
      x: 0,
      y: 30,
      text: '移除',
      fill: '#333',
      padding: [2, 15],
      fontSize: 12,
      boxStyle: {
        fill: '#c8d6e5',
        cornerRadius: 20,
      },
      hoverStyle: {
        fill: 'white',
        boxStyle: {
          fill: '#ff6b6b',
          cornerRadius: 20
        }
      },
      event: {
        tap: function () {
          rect.remove()
        }
      }
    }),
    new Text({
      x: 60,
      y: 30,
      text: '导出',
      fill: '#333',
      padding: [2, 15],
      fontSize: 12,
      boxStyle: {
        fill: '#c8d6e5',
        cornerRadius: 20,
      },
      hoverStyle: {
        fill: 'white',
        boxStyle: {
          fill: '#ff6b6b',
          cornerRadius: 20
        }
      },
      event: {
        tap: function () {
          rect.export('./test.png')
        }
      }
    }),
  ]
})
leafer.add(rect)
leafer.add(box1)
</script>